<template>
    <el-card> 
      <!-- 评论表格 -->
      <el-table :data="reviewList" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="content" label="评论内容" />
        <el-table-column prop="userId" label="用户ID" />
        <el-table-column prop="productsId" label="商品ID" />
        <el-table-column prop="createTime" label="创建时间" />
        
        <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <p>
        <el-pagination layout="prev, pager, next, sizes " :total="1000"
         :current-page="currentPage"
         :page-size="pageSize"
        @current-change="handlePageChange" 
        @size-change="handleSizeChange"
        />
      </p>
    </el-card>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 搜索关键字
const searchKeyword = ref('')
// 启用禁用
const value1 = ref(false)
//页面加载时加载所有用户数据
onMounted(() => {
  getAllReview()
})
//存放评论列表
const reviewList = ref([])
//分页页数
const currentPage = ref(1)
//页面数据条数
const pageSize = ref(10)
//获取所有评论数据
const getAllReview = () => {
  //发送请求
  axios.get(BASE_URL+'/v1/review/getAllReview?page='+(currentPage.value-1)*10+'&&size='+pageSize.value).then(res => {
        if(res.data.code === 2000){
          console.log(res.data.data)
          reviewList.value = res.data.data
        }else{
          ElMessage.error(res.data.msg)
        }
  })
}
//删除评论
const handleDelete = (id) => {
  axios.post(BASE_URL+'/v1/review/delete?id='+id).then(res => {
    if(res.data.code === 2000){
      ElMessage.success('删除评论成功')
      getAllReview()
    }else{
      ElMessage.error(res.data.msg)
   }
  })
}

// 分页事件处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage; // 更新当前页码
  getAllReview(); // 重新加载数据
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize; // 更新每页条数
  currentPage.value = 1;    // 重置到第一页
  getAllReview();          // 重新加载数据
};
</script>

<style>

</style>